import BatchInputModal from '@/pages/OrderModule/common/components/BatchInputModal';
import { Input, Select } from 'antd';
import { useMemo, useState } from 'react';
import FieldWrapper from '../FieldWrapper';

export const SelectBatchInput = (props) => {
  const { value, onChange, options, placeholder = '多个逗号隔开', batchInputPlaceholder = '换行输入，最多支持500条', defaultSelectValue, isBatchInput = true, onPressEnter } = props;
  const [selectValue, setSelectValue] = useState(defaultSelectValue);
  const inputValue = useMemo(() => {
    return value?.[selectValue] || '';
  }, [value, selectValue]);

  const handleSelectChange = (value) => {
    // 下拉框值改变时，清空输入框
    handleInputChange(undefined);
    setSelectValue(value);
  };

  const handleInputChange = (value) => {
    if (value === '') {
      triggerChange({ [selectValue]: undefined });
    } else {
      triggerChange({ [selectValue]: value });
    }
  };

  const triggerChange = (changedValue) => {
    onChange?.({ ...value, ...changedValue });
  };

  return (
    <FieldWrapper
      label={options && <Select value={selectValue} options={options} onChange={handleSelectChange} dropdownMatchSelectWidth={false}></Select>}
      suffix={isBatchInput && <BatchInputModal value={inputValue} placeholder={batchInputPlaceholder} maxLength={1000} onChange={handleInputChange}></BatchInputModal>}
    >
      <Input value={inputValue} style={{border: 0, outline: 0,boxShadow: 'none',background: 'transparent'}} placeholder={placeholder} allowClear onChange={(e) => handleInputChange(e.target.value)} onPressEnter={onPressEnter}/>
    </FieldWrapper>
  );
};
